<template>
    <div>
        <van-image round width="10rem" height="10rem" :src="vatar" />
        <h2>欢迎,{{ this.$store.state.user.userNick }}</h2>
        <div class="van-doc-demo-block">
            <div class="van-doc-demo-block__card" style="text-align: left">
                <van-uploader :max-size="500 * 1024" :max-count="1" :after-read="afterRead">
                    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
                        <div class="van-cell__title"><span>修改头像</span></div><i
                            class="van-icon van-icon-arrow van-cell__right-icon">
                            <!---->
                        </i>
                    </div>
                </van-uploader>

                <div @click="intoUpdatepwd" role="button" tabindex="0" class="van-cell van-cell--clickable">
                    <div class="van-cell__title"><span>修改密码</span></div><i
                        class="van-icon van-icon-arrow van-cell__right-icon">
                        <!---->
                    </i>
                </div>
                <div @click="outLogin" role="button" tabindex="0" class="van-cell van-cell--clickable">
                    <div class="van-cell__title"><span>退出登录</span></div><i
                        class="van-icon van-icon-arrow van-cell__right-icon">
                        <!---->
                    </i>
                </div>
            </div>
        </div>
        <van-dialog v-model="showpwd" title="密码模块" show-cancel-button :beforeClose="updatePwd">
            <van-cell-group>
                <van-field v-model="oldpwd" label="旧密码" placeholder="请输入旧密码" />
                <van-field v-model="newpwd" label="新密码" placeholder="请输入新密码" />
            </van-cell-group>
        </van-dialog>
    </div>
</template>
<script>
import { GetImage,UploadFile } from '../../request/FileHttpRequestUtil'
import req from '../../request/index'
export default {
    name: '',
    data() {
        return {
            showpwd:false,
            oldpwd:'',
            newpwd:'',
            vatar: "https://img01.yzcdn.cn/vant/cat.jpeg"
        };
    },
    methods: {
        updatePwd(val , next){
            if (val == "confirm") {
                req({
                    url: "updatePwd",
                    method: "post",
                    data: {
                        id: this.$store.state.user.id,
                        oldpwd: this.oldpwd,
                        newpwd: this.newpwd
                    }
                }).then(res => {
                    if(res.data.code == 0){
                        //弹框提示
                        this.outLogin();
                    }else{
                        //弹框提示
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
            next();
        },
        intoUpdatepwd(){
            this.showpwd = true;
            this.oldpwd = "";
            this.newpwd = "";
        },
        outLogin(){
            this.$store.state.user = null;
            this.$store.state.token = null;
            localStorage.removeItem("user03")
            localStorage.removeItem("token")
            this.$router.replace("/");
        },
        afterRead(file) {
            var that = this;
            console.log(file.file);
            var fdata = new FormData();
            fdata.append("file",file.file);
            fdata.append("id",this.$store.state.user.id);
            UploadFile("/api/updateUserAvatar",fdata,function(e){
                GetImage("/api/getImage?url=" + e.data).then(url => {
                    that.vatar = url;
                })
            })
        },
    },
    computed: {
    },
    mounted() {
        if (this.$store.state.user.userAvatar != null) {
            var that = this;
            GetImage("/api/getImage?url=" + this.$store.state.user.userAvatar).then(url => {
                that.vatar = url;
            })
        }
    },
}
</script>